// 提供复用的函数 （钩子）
import { useIntersectionObserver, useIntervalFn, findOrderDetail } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
import dayjs from 'dayjs'


/*
  traget   DOM元素
  apiFn   api函数
*/

// 实现页面懒加载
export const useLazyData = (apiFn) => {
    const result = ref([])
    const target = ref(null)
    // stop 停止观察
    const { stop } = useIntersectionObserver(
      // 监听的目标元素
      target,
      ([{ isIntersecting }], observerElement) => {
        // isIntersecting 是否进入可视区
        if (isIntersecting) {
          stop()
          // 调用API函数获取数据
          apiFn().then(data => {
            result.value = data.result
          })
        }
      },
      // 配置选项，相交的比例大于0就触发
      {
        threshold: 0
      }
    )
    return { result, target }
  }




export const usePayTime = (timeOutNuum) => {
  const timeOut = ref(1) // 订单过期时间
  const timeText = ref('00分00时')
  const {pause, resume} = useIntervalFn(()=>{
      timeOut.value--
      timeText.value = dayjs.unix(timeOut.value).format('mm分ss秒')
      if(timeOut.value<=0){
          pause()
          timeText.value = '超出时间未支付 订单已失效'
      }
  }, 1000, false)

  // 开启定时器
  const start = () => {
    timeOut.value = timeOutNuum
    timeText.value = dayjs.unix(timeOut.value).format('mm分ss秒')
    resume()
  }

  // 清除定时器
  onUnmounted(()=>{
      pause()
  })

  return {start, timeText}
}

